<template>
  <div class="h100">
    <div>
      <el-space>
        <el-button @click="exportExcel" type="primary">导出</el-button>
        <el-upload :on-change="change" accept=".xlsx" :show-file-list="false">
          <el-button @click="importExcel" type="primary">导入</el-button>
        </el-upload>
      </el-space>
    </div>
    <el-table :data="store.stationList" style="width: 100%">
      <el-table-column label="ID">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="车站">
        <template #default="scope">
          <div>{{ scope.row.city }}</div>
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.state"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { useStore } from "@/store";
import ExportJsonExcel from "js-export-excel";
import XLSX from 'xlsx-js-style'
const store = useStore();
// 初始化
store.init();

const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleDelete = (index, row) => {
  console.log(index, row);
};


// 文件导出
const exportExcel = () => {
  const option = {};
  // excel文件名称
  option.fileName = "车站管理";
  option.datas = [
    {
      sheetData: store.stationList,
      sheetName: "第一页",
      sheetHeader: ["id", "city", "state"],
      // sheetFilter: ["two", "one"],
      columnWidths: [5, 5],
    },
  ];
  var toExcel = new ExportJsonExcel(option); //new
  toExcel.saveExcel(); //保存
};

// 文件导入
const importExcel = () => {
  console.log(123);
};

//
const change = (file) => {
  var reader = new FileReader();
  reader.onload = function (e) {
    // 拿到文件里的内容
    const data = e.target.result;
    const workbook = XLSX.read(data, { type: "binary" });
    const sheetNames = workbook.SheetNames; // 工作表名称集合
    const worksheet = workbook.Sheets[sheetNames[0]]
    const list = XLSX.utils.sheet_to_json(worksheet)
    console.log(list)
    store.addStationList(list)
  };
  reader.readAsBinaryString(file.raw);
};
</script>
<style scoped></style>
